<template>
	
	
	<div>
		<div class="header1">
		        <p>账号信息</p>
		        <el-divider content-position="right">
		            <el-button type="primary" icon="el-icon-edit" circle @click="modify=!modify" v-if="modify===true && this.$GLOBAL.isLogin && !isPrint"></el-button>
		            <el-button  icon="el-icon-edit" type="warning" @click="isPrint=!isPrint; modify=!modify" v-if="modify===false&& !isPrint">修改密码</el-button>
					<el-button icon="el-icon-success" type="success" @click="edit()" v-if="modify===false&& !isPrint">保存</el-button>
		        </el-divider>
		    </div>
		    <div class="content1"  v-if="!isPrint"  v-loading="loading">
		        <el-row el-row type="flex"  align="middle">
		            <el-col :span="4" :offset="2">
		                <p>ID</p>
		            </el-col>
		            <el-col :span="3">
		                <p>{{userInfo.Id}}</p>
		            </el-col>
		        </el-row>
		         <el-row el-row type="flex"  align="middle">
		            <el-col :span="4" :offset="2">
		                <p>QQ/微信</p>
		            </el-col>
		            <el-col :span="3" v-if="modify===true">
		                <p>{{userInfo.connect}}</p>
		            </el-col>
		            <el-col :span="8"    v-else>
		               <el-input  maxlength="20" show-word-limit v-model="userInfo.connect" ></el-input>
		            </el-col>
		        </el-row>
		        <el-row el-row type="flex"  align="middle">
		            <el-col :span="4" :offset="2">
		                <p>昵称</p>
		            </el-col>
		            <el-col :span="3" v-if="modify===true">
		                <p>{{userInfo.userName}}</p>
		            </el-col>
		            <el-col :span="8"    v-else>
		               <el-input  maxlength="10" show-word-limit v-model="userInfo.userName" ></el-input>
		            </el-col>
		        </el-row>
				<el-row el-row type="flex"  align="middle">
				    <el-col :span="4" :offset="2">
				        <p>性别</p>
				    </el-col>
				    <el-col :span="12" v-if="modify===true">
				        <p>{{userInfo.sex}}</p>
				    </el-col>
				    <el-col :span="12"  v-else>
				        <!-- <el-input v-model="userInfo.sex" ></el-input> -->
				        <el-radio v-model="userInfo.sex" label="男">男</el-radio>
				        <el-radio v-model="userInfo.sex" label="女">女</el-radio>
				        <el-radio v-model="userInfo.sex" label="保密">保密</el-radio>
				    </el-col>
				</el-row>
		        <el-row style="margin-bottom:100px">
		            <el-col :span="4" :offset="2">
		                <p>简介</p>
		            </el-col>
		            <el-col :span="8"  v-if="modify===true">
		                <p>{{userInfo.introduction}}</p>
		            </el-col>
		            <el-col :span="8"   v-else>
		                <el-input  type="textarea" maxlength="100" show-word-limit :rows="5" v-model="userInfo.introduction"  style="margin-top: 1.25rem;"></el-input>
		            </el-col>
		        </el-row>
		        
		         
		    </div>
			<div class="content1"  v-else>
				<el-row type="flex"  align="middle" justify="center">
					<el-col :span="16"  >
						<register :id="userInfo.Id"  :isRegister="false"  @goBack="isPrint=!isPrint"></register>
						
					</el-col>
				</el-row>				
			</div>
		    <div class="header1">
		        <span>学历信息</span>
		        <el-divider content-position="right">
		            <!-- <el-button type="primary" icon="el-icon-edit" circle @click="modify=!modify" v-if="modify===true && this.$GLOBAL.isLogin"></el-button> -->
		            <!-- <el-button icon="el-icon-success" @click="modify=!modify;edit()" v-if="modify===false" type="success">保存</el-button> -->
		            </el-divider>
		    </div>
		    <div class="content1"  v-loading="loading">
				<el-row el-row type="flex"  align="middle">
				    <el-col :span="4" :offset="2">
				        <p>姓名</p>
				    </el-col>
				    <el-col :span="6" v-if="modify===true">
				        <p>{{userInfo.name}}</p>
				    </el-col>
				    <el-col :span="8"   v-else>
				       <el-input  maxlength="6" show-word-limit v-model="userInfo.name" ></el-input>
				    </el-col>
				</el-row>
		        <el-row el-row type="flex"  align="middle">
		            <el-col :span="4" :offset="2">
		                <p>学号</p>
		            </el-col>
		            <el-col :span="3" v-if="modify===true">
		                <p>{{userInfo.stuId}}</p>
		            </el-col>
		             <el-col :span="8"    v-else>
		               <el-input  maxlength="13"  v-model="userInfo.stuId" ></el-input>
		            </el-col>
		        </el-row>
		        <el-row>
		            <el-col :span="4" :offset="2">
		                <p>学院</p>
		            </el-col>
		            <el-col :span="8"  v-if="modify===true">
		                <p>{{userInfo.academy}}</p>
		            </el-col>
		            <el-col :span="8"   v-else>
		                <el-input   v-model="userInfo.academy" ></el-input>
		            </el-col>
		        </el-row>
		        <el-row el-row type="flex"  align="middle">
		            <el-col :span="4" :offset="2">
		                <p>专业</p>
		            </el-col>
		            <el-col :span="6" v-if="modify===true">
		                <p>{{userInfo.major}}</p>
		            </el-col>
		            <el-col :span="8"   v-else>
		               <el-input  v-model="userInfo.major" ></el-input>
		            </el-col>
		        </el-row>
		    </div>
	</div>
  
</template>

<script>
import register  from '../components/register.vue'
	export default {
		components: {
		  register
		  
		},
  data() {
		
    return {
			modify:true,
			loading:false,
			total:"",
			isPrint:false,
			userInfo:{
			    name:"",
			    pos:"普通用户",
			    Id:"",
			    introduction:"",
			    sex:"",
			    stuId:"",
			    userName:"",
			    connect:"",
			    academy:"",
			    major:"",
			    proData: []
			},
			
			
			        
    }
  },
			async created() {
  	           
  			   if(this.$GLOBAL.isLogin){
  				  this.loading = true;
  				   
  				   let res = await this.text(this.$api.showSelf)
  				   
  				  if (res.code === 200) {
  					  this.$GLOBAL.userId = res.data.idt
  					  sessionStorage.setItem("userId", res.data.id);	
  					  this.$GLOBAL.avatar = this.$api.picTemplate + res.data.avatar
  					  
					  sessionStorage.setItem("avatar", this.$GLOBAL.avatar);
  					  if (res.data.perms >= 1) {								
  					  	this.$GLOBAL.isInsider = true
  					  	sessionStorage.setItem("isInsider", this.$GLOBAL.isInsider);	
  					  }else{
  						  this.$GLOBAL.isInsider = false
  						  sessionStorage.setItem("isInsider", this.$GLOBAL.isInsider);	
  					  }
  					  if (res.data.perms >= 2) {							
  					  	this.$GLOBAL.isAdmin = true
  					  	sessionStorage.setItem("isAdmin", this.$GLOBAL.isAdmin);	
  					  }else{
  						  this.$GLOBAL.isAdmin = false
  					  	sessionStorage.setItem("isAdmin", this.$GLOBAL.isAdmin);	
  					  }
  				       this.userInfo.name = res.data.name
  				       this.userInfo.Id = res.data.id
  				       this.userInfo.sex = res.data.sex
  				       this.userInfo.academy = res.data.academy
  				       this.userInfo.major = res.data.major
  				       this.userInfo.sex = res.data.sex
  				       this.userInfo.stuId = res.data.stuId
  				       this.userInfo.userName = res.data.userName
  				       this.userInfo.introduction = res.data.introduction
  				       this.userInfo.academy = res.data.academy
  				       this.userInfo.major = res.data.major
						this.userInfo.connect = res.data.connect
						this.$GLOBAL.avatar = this.$api.picTemplate + res.data.avatar
						
  				       if (res.data.perms === 1) {
  				           this.userInfo.pos = "工作室成员"
  				       }else if(res.data.perms === 2){
  				            this.userInfo.pos = "管理员"
  				       }
						this.$emit('resData', this.userInfo)
  				   } else{
  				       this.$message.error('请求失败或者接口返回失败');
  				   }
  				   this.loading = false;
  			   }
  	            
  	        },
	 methods: {
		
		edit: async function() {
			this.$confirm('确认保存？', '确认信息', {
				distinguishCancelAndClose: true,
				confirmButtonText: '确认',
				cancelButtonText: '取消'
			}).then(async () => {
				this.modify=!this.modify;
				this.loading = true;
				let postDate = {
					"stuId": this.userInfo.stuId,
					"name":this.userInfo.name,
					"sex": this.userInfo.sex,
					"academy": this.userInfo.academy,
					"major": this.userInfo.major,
					userName:this.userInfo.userName,
					introduction:this.userInfo.introduction,
					connect:this.userInfo.connect
				}
				 let res = await this.text(this.$api.modifyUser,postDate,"post")
				 
				 if(res.code === 200){
					 this.$message({
						 message:'保存成功',
						 type: 'success',
					 })
					location.reload();
				 }else{
					 this.$message.error('请求失败或者接口返回失败');
				 }
				this.loading = false;
		    }).catch(() => {
			    this.modify=!this.modify;
		});
		},
		
   },
	 }
</script>
<style scoped>
	@import url("../assets/style/info.css");
</style>
	